import React, { useState } from "react";
import { Search } from "lucide-react";
import { queryShopList } from "@/request/testAPI";
// import "./index.module.less";
import styles from "./index.module.less";

const restaurants: any[] = [
  {
    id: 1,
    province: "陕西123123",
    city: "西安123123",
    name: "陕西省西安市小寨金莎国际店123123",
    address:
      "陕西省西安市雁塔区长安中路65号金莎国际广场5层小肥羊火锅餐厅123131231",
    phone: "029-8788855512312312",
    category: "可售卡和接受刷卡消费1231231231",
  },
  {
    id: 2,
    province: "陕西",
    city: "西安",
    name: "陕西省西安市长乐公园店",
    address: "陕西省西安市碑林区金花北路35号长乐荟3层小肥羊火锅餐厅",
    phone: "029-82473619",
    category: "可售卡和接受刷卡消费",
  },
  // Add more data as needed...
];

const QueryShop = () => {
  const [selectedBrand, setSelectedBrand] = useState("kfc");
  const [city, setCity] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    console.log("查询:", { selectedBrand, city });

    if (selectedBrand && city) {
      const res = await queryShopList({
        username: "lipan",
        pwd: "1234qwer",
      });
      console.log("登录返回", res);
    }
  };

  return (
    <div className={styles["query-shop"]}>
      <div className={styles["title"]}>查询餐厅</div>
      <form className={styles["search-form"]} onSubmit={handleSubmit}>
        <div className={styles["form-group"]}>
          <label className={styles["label"]}>选择品牌</label>
          <select
            className={styles["select"]}
            value={selectedBrand}
            onChange={(e) => setSelectedBrand(e.target.value)}
          >
            <option value="kfc">肯德基</option>
            <option value="pizza">必胜客</option>
            <option value="bskzjs">必胜宅急送</option>
            <option value="dfjb">东方既白</option>
            <option value="xfy">小肥羊</option>
          </select>
        </div>

        <div className={styles["form-group"]}>
          <label className={styles["label"]}>查询城市</label>
          <div style={{ width: "100%", display: "flex" }}>
            <Search className={styles["search-icon"]} />
            <input
              type="text"
              className={styles["input"]}
              placeholder="请在此输入您要查询的城市"
              value={city}
              onChange={(e) => setCity(e.target.value)}
            />
          </div>

          <div className={styles["example"]}>例如：查询北京市请输入北京</div>
        </div>

        <div className={styles["form-group"]}>
          <label className={styles["label"]} style={{ visibility: "hidden" }}>
            查询城市
          </label>
          <button type="submit" className={styles["right-item-btn"]}>
            查询
          </button>
        </div>
      </form>

      <div className={styles["container"]}>
        <div className={styles["title-table"]}>
          西安可使用心意美食卡小肥羊餐厅如下
        </div>
        <div className={styles["table-container"]}>
          <table className={styles["restaurant-table"]}>
            <thead>
              <tr>
                <th>序号</th>
                <th>省份/直辖市</th>
                <th>城市</th>
                <th>餐厅名称</th>
                <th>餐厅地址</th>
                <th>电话</th>
                <th>分类</th>
              </tr>
            </thead>
            <tbody>
              {restaurants.map((restaurant) => (
                <tr key={restaurant.id}>
                  <td>{restaurant.id}</td>
                  <td>{restaurant.province}</td>
                  <td>{restaurant.city}</td>
                  <td>{restaurant.name}</td>
                  <td>{restaurant.address}</td>
                  <td>{restaurant.phone}</td>
                  <td>{restaurant.category}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default QueryShop;
